﻿import 'normalize-css/normalize.css'
import React, { Component} from 'react'
import { connect } from 'react-redux'
import Slot from './Slot'

import Notification from '@/components/notification'
import MenuBar from '@/components/menu-bar'
import CurrentHandle from '@/components/current-handle'
// import { bindActionCreators } from 'redux'
import actions from '@/store/actions.js'
import * as utils from '@/utils/index.js'
import beautify from 'js-beautify'
import config from '@/config'
import classnames from 'classnames';
import {makeStyles, withStyles} from '@material-ui/styles';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import Button from '@material-ui/core/Button';
import UserConfig from '@/components/user-config'
import { unstable_Box as Box } from '@material-ui/core/Box';
import * as API from '@/api'
import LayoutPanel from '@/components/panel'
// import Snackbar from '@material-ui/core/Snackbar';
// import Slide from '@material-ui/core/Slide';
import {version} from '@/api/config'
import IScroll from 'iscroll'
import { observer, inject } from 'mobx-react'


let elementAction = actions()

import TextField from '@material-ui/core/TextField';
import { rootStore } from '../mobx/rootStore'

const clsPrefix = config.clsPrefix

// const useStyles = makeStyles(theme => ({
// 	container: {
// 	  display: 'flex',
// 	  flexWrap: 'wrap',
// 	},
// 	textField: {
// 	  marginLeft: theme.spacing.unit,
// 	  marginRight: theme.spacing.unit,
// 	},
// 	dense: {
// 	  marginTop: 16,
// 	},
// 	menu: {
// 	  width: 200,
// 	},
// }));

// const classes = useStyles();

const styles = {

}

const outputPath = config.path.output

@inject('rootStore')
@observer
class App extends Component {
	constructor(props) {
		super(props)
		this.handleClose = this.handleClose.bind(this)
		this.state={
			path:[],
		}
	}
	componentWillReceiveProps(nextProp){
		let { rootStore} = nextProp
		let { currentDom, } = rootStore
		if(currentDom != this.props.rootStore.currentDom && currentDom){
			var cmpStyle= window.getComputedStyle(currentDom, null);
			rootStore.updateSizeFix({
				width:
					utils.sizeToNum(cmpStyle.paddingLeft) +
					utils.sizeToNum(cmpStyle.paddingRight) +
					utils.sizeToNum(cmpStyle.borderLeftWidth) +
					utils.sizeToNum(cmpStyle.borderRightWidth),
				height:
					utils.sizeToNum(cmpStyle.paddingTop) +
					utils.sizeToNum(cmpStyle.paddingBottom) +
					utils.sizeToNum(cmpStyle.borderTopWidth) +
					utils.sizeToNum(cmpStyle.borderBottomWidth)
			});
		}
	}
	componentDidMount(){
		console.log("map----$---->", this.props)
		let { rootStore } = this.props
		let { nodeTree } = rootStore
		let data = '[]'
		data=JSON.parse(data)
		let node={
			children: data
		}
		setTimeout(()=>{
			rootStore.nodeUpdateByPath({
				path: [0],
				node:node
			});
			setInterval(() => {
				// utils.save()
			}, 10000);
		},500)
		setTimeout(()=>{
			// window.paperScroll = new IScroll('#paper', {
			// 	mouseWheel: true,
			// 	scrollbars: true,
			// 	preventDefault: false
			// });
		})
	}
	componentDidUpdate() {
		const {exportStatus} = this.props
		if(exportStatus){
			if(globalThis === window){ //浏览器环境
				
			}else{ //nodejs 环境
				let outputPath = config.path.output
				this.outputHtml()
			}
		}
	}
	outputHtml(){
		if(globalThis === window){//浏览器环境

		}else{//nodejs 环境
			let htmlTpl = fs.readFileSync(`${__dirpath}/template/html.html`, 'utf8')
			let text = $("#paper .emidraw-root-slot").html().replace(/style=""/,"")
			let html = htmlTpl.replace(/<\!--\s*slot\s*-->/, text)
			//替换图片路径
			window.htmlImages.forEach((item)=>{
				html = html.replace(item.from, item.to)
			})

			html = beautify.html(html, {
				indent_size: 2
			})

			fs.writeFile(`${outputPath}/index.html`, html,function(err) {
			});
		}
		
	}
	handleClose(){
		this.setState({dialogOpen: false})
	}
	openInBrowser(url){
		gui.Shell.openExternal(url);
	}
	handleACcodeChange(e){
		this.setState({acCode: e.target.value})
	}
	testChange(e){
		this.setState({
			acCode: e.target.value
		})
	}
	licenseDialogClose(){
		const {dispatch} = this.props
		dispatch.showLicenseDialog(false)
	}
	boundaryMouseMove(e){
		// const {slideNumber} = this.props
		// if(slideNumber.status){
		// 	dispatch.setSlideNumber({
		// 		status: true,
		// 		moving:{
		// 			x: e.pageX,
		// 			y: e.pageY,
		// 		}
		// 	})
		// }
	}
	boundaryMouseUp(e){
		// setTimeout(()=>{
		// 	window.panelScroll.initiated = false
		// 	window.panelScroll.enable()
		// },0)
        // const {dispatch} = this.props
        // dispatch.setSlideNumber({
        //     status: false,
		// 	end: {
		// 		x: e.pageX,
		// 		y: e.pageY,
		// 	}
        // })
    }
	render() {
		const {nodeTree, operationMode,license, showLicenseDialog,editConfig, currentPath} = this.props.rootStore
		let selector;
		return (
			<div className={`${clsPrefix}boundary`}
			onMouseMove={this.boundaryMouseMove.bind(this)}
			onMouseUp={this.boundaryMouseUp.bind(this)}
			>	
				<MenuBar></MenuBar>
				<div className={`${clsPrefix}layout-space`}>
					<div id="paper"
						className={classnames(`${clsPrefix}paper`,{"mode-draw": operationMode == 'draw'})}>
						
							{nodeTree.map((item, index) => {
								var _path=_.clone(this.state.path)
								_path.push(index)
								selector = item.selector?item.selector:[]
								return(
									<Slot
										selector={selector}
										sClass={item.class}
										text={item.text}
										children={item.children}
										path={_path}
										key={index}
										tag={item.tag}
										attr={item.attr}
										styles={item.styles}
										isActive={item.isActive}
										ref={(slot) => { this.TheSlot = slot}}
										isRoot={item.isRoot}
									/>
								)
							})}
							<CurrentHandle />
						
					</div>
					<LayoutPanel />
					{/* {editConfig ? <UserConfig /> : ""} */}
				</div>
			</div>
		)
	}
}

// function mapStateToProps(state) {
// 	return {
// 		nodeTree: state.nodeTree,
// 		currentDom: state.currentDom,
// 		exportStatus: state.exportStatus,
// 		operationMode: state.operationMode,
// 		license: state.license,
// 		showLicenseDialog: state.showLicenseDialog,
// 		slideNumber: state.slideNumber,
// 		editConfig: state.editConfig
// 	}
// }
// function mapDispatchToProps(dispatch) {
// 	return {
// 		dispatch:bindActionCreators(elementAction, dispatch)
// 	}
// }
// export default connect(
// 	mapStateToProps,
// 	mapDispatchToProps
// )(withStyles(styles)(App))

export default withStyles(styles)(App)
// export default App
